﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Gritter - 测试</title>
    <!-- 禁止IE兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- gritter css-->
    <link rel="stylesheet" type="text/css" href="css/jquery.gritter.css" />

    <!-- jQuery 1.7.1 -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load('jquery', '1.7.1');</script>

    <!-- gritter js -->
    <script type="text/javascript" src="js/jquery.gritter.js"></script>

    <style type="text/css">
      body {
        background:#222 url(images/trees.jpg);
        color:#fff;
      }
      a {
        color:#00ff00;
      }
      #container {
        width:600px;
        background:#333;
        padding:10px;
      }
  </style>
  <script type="text/javascript">

    $(function(){

      // 覆盖 gritter 的 初始设置 
          /*
      $.extend($.gritter.options, {
          class_name: 'gritter-light', // for light notifications (can be added directly to $.gritter.add too)
          position: 'bottom-left', // possibilities: bottom-left, bottom-right, top-left, top-right
        fade_in_speed: 100, // how fast notifications fade in (string or int)
        fade_out_speed: 100, // how fast the notices fade out
        time: 3000 // hang on the screen for...
      });
          */

      $('#add-sticky').click(function(){

        var unique_id = $.gritter.add({
          // (string | mandatory) the heading of the notification
          title: '这是一个 置顶 的 通知!',
          // (string | mandatory) the text inside the notification
          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
          // (string | optional) the image to display on the left
          image: 'http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg',
          // (bool | optional) if you want it to fade out on its own or just sit there
          sticky: true,
          // (int | optional) the time you want it to be alive for before fading out
          time: '',
          // (string | optional) the class name you want to apply to that specific message
          class_name: 'my-sticky-class'
        });

        // You can have it return a unique id, this can be used to manually remove it later using
        /*
        setTimeout(function(){

          $.gritter.remove(unique_id, {
            fade: true,
            speed: 'slow'
          });

        }, 6000)
        */

        return false;

      });

      $('#add-regular').click(function(){

        $.gritter.add({
          // (string | mandatory) the heading of the notification
          title: '这是一个 普通 的 通知!',
          // (string | mandatory) the text inside the notification
          text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
          // (string | optional) the image to display on the left
          image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
          // (bool | optional) if you want it to fade out on its own or just sit there
          sticky: false,
          // (int | optional) the time you want it to be alive for before fading out
          time: ''
        });

        return false;

      });

          $('#add-max').click(function(){

              $.gritter.add({
                  // (string | mandatory) the heading of the notification
                  title: '这一个 通知 并且 在 桌面上 同时 只能存在不 超过3个 的通知!',
                  // (string | mandatory) the text inside the notification
                  text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
                  // (string | optional) the image to display on the left
                  image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
                  // (bool | optional) if you want it to fade out on its own or just sit there
                  sticky: false,
                  // (function) before the gritter notice is opened
                  before_open: function(){
                      if($('.gritter-item-wrapper').length >= 3)
                      {
                          // Returning false prevents a new gritter from opening
                          return false;
                      }
                  }
              });

              return false;

          });

      $('#add-without-image').click(function(){

        $.gritter.add({
          // (string | mandatory) the heading of the notification
          title: '这是一个 不包含 图片 的 通知!',
          // (string | mandatory) the text inside the notification
          text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.'
        });

        return false;
      });

          $('#add-gritter-light').click(function(){

              $.gritter.add({
                  // (string | mandatory) the heading of the notification
                  title: '这是一个 白色背景 的 通知',
                  // (string | mandatory) the text inside the notification
                  text: 'Just add a "gritter-light" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
                  
                  class_name: 'gritter-light'
              });

              return false;
          });

      $('#add-with-callbacks').click(function(){

        $.gritter.add({
          // (string | mandatory) the heading of the notification
          title: '这是一个 带回调函数 的通知!',
          // (string | mandatory) the text inside the notification
          text: '这是 回调函数 ...',
          // (int | optional) the time you want it to be alive for before fading out
          time: '4000',
          // (function | optional) function called before it opens
          before_open: function(){
            alert('我是回调函数 在通知 打开时');
          },
          // (function | optional) function called after it opens
          after_open: function(e){
            alert("我是回调函数 在通知 打开后: \n我是 通过 jQuery 创建的 Gritter 元素...\n" + e);
          },
          // (function | optional) function called before it closes
          before_close: function(e, manual_close){
                      var manually = (manual_close) ? '通过 点击 "X" 按钮 关闭的通知!' : '不是';
            alert("我是回调函数 在通知 关闭时: \n是否手动关闭:" + manually);
          },
          // (function | optional) function called after it closes
          after_close: function(e, manual_close){
                      var manually = (manual_close) ? '通过 点击 "X" 按钮 关闭的通知!' : '不是';
            alert("我是回调函数 在通知 关闭后. \n是否手动关闭:" + manually);
          }
        });

        return false;
      });

      $('#add-sticky-with-callbacks').click(function(){

        $.gritter.add({
          // (string | mandatory) the heading of the notification
          title: '这是一个 带回调函数 的 置顶通知!',
          // (string | mandatory) the text inside the notification
          text: '置顶 置顶 通知.. 置顶 置顶 通知...',
          // Stickeh!
          sticky: true,
          // (function | optional) function called before it opens
          before_open: function(){
            alert('我是 置顶通知 的 回调函数 在通知 打开时');
          },
          // (function | optional) function called after it opens
          after_open: function(e){
            alert("我是 置顶通知 的 回调函数 在通知 打开后: \n我是 通过 jQuery 创建的 Gritter 元素......\n" + e);
          },
          // (function | optional) function called before it closes
          before_close: function(e){
            alert("我是 置顶通知 的 回调函数 在通知 关闭时: 我是 通过 jQuery 创建的 Gritter 元素...... \n" + e);
          },
          // (function | optional) function called after it closes
          after_close: function(){
            alert('我是 置顶通知 的 回调函数 在通知 关闭后');
          }
        });

        return false;

      });

      $("#remove-all").click(function(){

        $.gritter.removeAll();
        return false;

      });

      $("#remove-all-with-callbacks").click(function(){

        $.gritter.removeAll({
          before_close: function(e){
            alert("我是回调函数 在 所有通知关闭时.  我是 通过 jQuery 创建的 Gritter 元素(包含所有的 Gritter 通知).\n" + e);
          },
          after_close: function(){
            alert('我是回调函数 在 所有通知关闭后.');
          }
        });
        return false;

      });


    });
  </script>
  </head>
  <body>
    <div id="container">
      <h1>Gritter Demo 中文</h1>
      <p>
        这超级棒的背景只是告诉你，gritter所有的通知是透明的！浏览器支持：FF3+，Opera 9，IE7，IE8，Safari 4+
        <em>测试通过: FF 3+, Opera 9, IE7, IE8, Safari 4+</em>
      </p>
      <ul>
        <li>
          <a href="#" id="add-regular">添加一个定期的通知</a>: 你可设置一个通知在一段时间后自动消失.
        </li>
        <li>
          <a href="#" id="add-sticky">添加一个置顶的通知</a>: 他不会自动消失掉. 但是你可以手动关闭他.
        </li>
        <li>
          <a href="#" id="add-without-image">添加一个不会包含图片的通知</a>
        </li>
            <li>
                <a href="#" id="add-gritter-light">添加一个白色背景的通知</a>: 通过 'gritter-light' 样式 设置 他
            </li>
        <li>
          <a href="#" id="add-with-callbacks">添加一个带回调函数 的 普通通知</a>
        </li>
        <li>
          <a href="#" id="add-sticky-with-callbacks">添加一个带回调函数 的 置顶通知</a>
        </li>
            <li>
                <a href="#" id="add-max">添加最多不超过 3个 的 通知</a>: 如果桌面上有3个通知, 他将不会再显示下一个通知 直至 桌面上的通知数量少于3.
            </li>
        <li>
          <a href="#" id="remove-all">清空所有通知</a>
        </li>
        <li>
          <a href="#" id="remove-all-with-callbacks">清空所有通知 (带回调函数)</a>
        </li>
      </ul>
    </div>
  </body>
</html>